<template>
	<div id="websiteEcharts" v-bind:style="{ height: '400px' }"></div>
</template>

<script setup>//@ts-nocheck
import { onMounted, onUnmounted, inject } from "vue"
import api from '../../api/api'

// 声明定义一下echart
let echart = inject("echarts")
onMounted(() => {
	initChart()
})
onUnmounted(() => {
	echart.dispose
})
// 基础配置一下Echarts
function initChart() {
	let chart = echart.init(document.getElementById("websiteEcharts"))
	// 显示加载
	chart.showLoading()
	// 封装获取对应数据的方法
	async function toGetData() {
		return await api.get(`/mock/website`).then((res) => {
			return res.data.data
		})
	}
	toGetData().then((res) => {
		// 关闭加载
		chart.hideLoading()
		let seriesData = {
			ClickNum: [],
			LoginedNum: [],
			registeiedNum: [],
			date: []
		}
		res.forEach(x => {
			seriesData.ClickNum.push(x.ClickNum)
			seriesData.LoginedNum.push(x.LoginedNum)
			seriesData.registeiedNum.push(x.registeiedNum)
			seriesData.date.push(x.date)
		})
		// 配置和数据
		let options = {
			//鼠标滑过提示栏
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow',
				},
			},
			title: [
				{
					x: 12,
					y: 12,
					text: '官网点击与登录等情况',
					textStyle: {
						color: '#ecf0f1',
						fontSize: 25,
						fontWeight: 500,
					},
				}],
			color: ['#EC808C', '#FEF0AC', '#93CCFF', '#EA7683'],
			//图表选择栏
			legend: {
				bottom: 30,
				left: 'center',
				itemHeight: 18, //修改icon图形大小
				itemWidth: 18, //修改icon图形大小
				itemGap: 120,
				selectedMode: false, //不允许点击图例
				textStyle: {
					fontSize: 13,
					color: '#ecf0f1',
					padding: [0, 8],
				},
				data: [
					{ name: '官网', icon: 'rect' },
					{ name: '登录', icon: 'rect' },
					{ name: '注册', icon: 'rect' },
					{
						name: '注册率',
						icon: 'line',
					},
				],
			},
			//图标离容器的距离
			grid: {
				left: '3%',
				top: 100,
				right: '3%',
				bottom: '75',
				//是否包含坐标轴
				containLabel: true,
				//鼠标滑过是否显示信息栏，目前来看最好在grid中配置tooltip鼠标滑过信息栏
			},
			//x坐标轴
			xAxis: [
				{
					type: 'category',
					data: seriesData.date,
					axisTick: {
						show: false,
					},
					boundaryGap: true,
					axisLine: {
						show: false,
					},
					axisLabel: {
						textStyle: {
							color: '#ecf0f1',
							fontSize: 14,
							fontFamliy: 'Arial',
						},
					},
				},
			],
			//y坐标轴
			yAxis: [
				{
					type: 'value',
					name: '单位：次',
					nameTextStyle: {
						color: '#ecf0f1',
						fontSize: 14,
						padding: [10, 3, 0, 0],
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#ecf0f1',
						},
					},
					splitNumber: 6,
					splitLine: {
						show: false,
						lineStyle: {
							color: '#ecf0f1',
							type: 'dashed',
						},
					},
				},
				{
					name: '(%)',
					min: 0,
					max: 100,
					splitNumber: 6,
					nameTextStyle: {
						color: '#ecf0f1',
						fontSize: 16,
						fontWeight: 400,
						padding: [10, -30, 0, 0],
					},
					axisLabel: {
						show: true,
						textStyle: {
							color: '#ecf0f1',
						},
					},
					splitLine: {
						show: true,
						lineStyle: {
							color: '#ecf0f1',
							type: 'dashed',
						},
					},
				},
			],

			// 数据展示区域
			series: [
				{
					name: '官网',
					type: 'bar',
					stack: 'Ad',
					barWidth: 18,
					data: seriesData.ClickNum,
					markLine: {
						symbol: 'none',
						label: {
							show: true,
							position: 'end',
							formatter: '标线' + '\n\n{c}',
							color: '#ecf0f1',
						},
						lineStyle: {
							type: 'solid',
							color: '#2ecc71',
							width: 2,
						},
						data: [
							{
								name: '刻度标线',
								yAxis: 500,
							},
						],
					},
				},
				{
					name: '登录',
					type: 'bar',
					stack: 'Ad',
					barWidth: 18,
					data: seriesData.LoginedNum,
				},
				{
					name: '注册',
					type: 'bar',
					stack: 'Ad',
					barWidth: 18,
					data: seriesData.registeiedNum,
				},
				{
					show: false,
					name: '标线',
					data: [],
					type: 'line',
					itemStyle: {
						normal: {
							borderColor: '#ecf0f1',
							borderWidth: 2,
						},
					}, //在单个图表实例中存在多个y轴的时候有用
				},
			],
		}

		chart.setOption(options)
	})
	window.onresize = function () {
		//自适应大小
		chart.resize()
	}
}

</script>

<style lang="scss" scoped>

</style>